<template>
	<div style="text-align: center;margin-top:40px;margin-left:40px;margin-right: 40px;">
		<img src="@/assets/login-logo.png" style="width: 200px;height: 200px;"/>
		<div><label style="font-size:26px;weight:bold;">{{title}}</label></div>
		<div style="position: relative;margin-top:20px;">
			<van-icon name="friends" style="position: absolute;left:0px;" size="30" />
			<input type="text" v-model="username" class="login-text-field" />
		</div>
		<div style="position: relative;margin-top:10px;">
			<van-icon name="lock" style="position: absolute;left:0px;" size="30" />
			<input type="password" v-model="password" class="login-text-field" />
		</div>
		<div style="margin: 20px;">
			<van-button type="primary" round :block="true" @click="login">登录</van-button>
		</div>
	</div>
</template>

<script>
	import restUtil from '@/utils/restUtil.js';
	import {
		Dialog
	} from 'vant';
	import constants from '@/utils/constants.js';
	export default {
		name: "Login",
		data() {
			return {
				username: "",
				password: "",
				title:""
			}
		},mounted() {
			window.localStorage.removeItem("token");
			this.axios.defaults.headers.common['X-Token'] = "";
			this.title=constants.TITLE;
		},
		methods: {
			login() {
				if (this.username == "") {
					Dialog.alert({
						title: '提示',
						message: "用户名必须填写",
					}).then(() => {
						// on close
					});
					return;
				}
				if (this.password == "") {
					Dialog.alert({
						title: '提示',
						message: "密码必须填写",
					}).then(() => {
						// on close
					});
					return;
				}
				var that=this;
				restUtil.postAction(this,"loginpage/login", {
					username: this.username,
					password: this.password
				}, this.config).then(
					function(response) {
						if (response.data.code == 1) {
							window.localStorage.setItem("token",response.data.token);
							window.localStorage.setItem("uiframework","vantvue3");
							that.$router.push("/mmain");
						}else{
							Dialog.alert({
								title: '提示',
								message: response.data.message,
							}).then(() => {
								// on close
							});
						}
					});
			}
		},
	}
</script>

<style>
	
</style>
